<!-- $Id: example-ajax.html,v 1.2 2006/04/27 21:00:38 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>::iSchedule::</title>

<link rel="stylesheet" href="style/tabber.css" TYPE="text/css" MEDIA="screen">


<!--
Load prototype.js
You can get it at http://prototype.conio.net/
-->
	<script language="javascript1.2" type="text/javascript" src="./js/prototype.js"></script> 
	<script language="javascript1.2" type="text/javascript" src="./js/effects.js"></script> 
	<script language="javascript1.2" type="text/javascript" src="./js/controls.js"></script> 
	<script language="javascript1.2" type="text/javascript" src="./js/js.js"></script>
        <script language="javascript1.2" type="text/javascript" src="./js/Tokenizer.js"></script>

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

var tabberOptions = {

  'onClick': function(argsObj) {

    var t = argsObj.tabber; /* Tabber object */
    var i = argsObj.index; /* Which tab was clicked (0..n) */
    var div = this.tabs[i].div; /* The tab content div */

    
    /* Display a loading message */
    div.innerHTML = "<p>Loading...<\/p>";

    /* Fetch some html depending on which tab was clicked */
    var url = 'student_forms/form' + i + '.html';
    var pars = 'item='+ i; /* just for example */
    var myAjax = new Ajax.Updater(div, url, {method:'get',parameters:pars});
        showStudentSchedule();
	//ajaxReadSchedule();
        
        if(i==1)
        {
            studentIdSuggestion();
            classroomSuggestion();
           // studentNameSuggestion();
        }
        else if(i==2)
        {
            professorIdSuggestion();
        }
        else if(i==3)
        {
            classroomSuggestion();
        }
  },
  
  'onLoad': function(argsObj) {
    /* Load the first tab */
    argsObj.index = 0;
    this.onClick(argsObj);
	//ajaxReadSchedule();
        showStudentSchedule();
  },
}

function AJAXInteraction(url, callback) {

    var req = init();
    req.onreadystatechange = processRequest;
        
    function init() {
      if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
    
    function processRequest () {
      // readyState of 4 signifies request is complete
      if (req.readyState == 4) {
        // status of 200 signifies sucessful HTTP call
        if (req.status == 200) {
          if (callback) callback(req.responseXML);
        }
      }
    }

    this.doGet = function() {
      req.open("GET", url, true);
      req.send(null);
    }
}

function getId()
{
    var locate = window.location
    document.joe.burns.value = locate
    var text = document.joe.burns.value
    
    var ini = text.lastIndexOf("=") + 1;
    var fin = text.length;
    
    text = text.substring(ini, fin);
    return text;
}

function showStudentSchedule()
{   
    var url = "SearchStudentSchedule?student_id=" + getId();
    var ajax = new AJAXInteraction(url, validateCallbackShowStudentSchedule);
    ajax.doGet();
}

function validateCallbackShowStudentSchedule(responseXML)
{
    var Schedule="";
	
		Schedule ="<br><strong>" + responseXML.getElementsByTagName('student')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table width='800px'><tr><td width='300px'><strong>Nombre de la clase</strong></td><td><strong>Dias</strong></td><td><strong>Horario</strong></td><td><strong>Salon</strong></td><td width='200px'><strong>Profesor</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('classroom');
				Schedule += "</td>";
				Schedule += "<td width='200px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('professor-name');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('student_schedule_div').innerHTML = Schedule;
}

function studentNameSuggestion()
{
    
    //ajaxReadXML('xml/students.xml','st_name_autoComplete','person','st_name_search_tf','')
}

function studentIdSuggestion()
{
    var url = "GetAllStudents";
    var ajax = new AJAXInteraction(url, validateCallbackStudentIdSuggestion);
    ajax.doGet();
}

function validateCallbackStudentIdSuggestion(responseXML)
{
    showXML(responseXML, 'st_id_autoComplete', 'person', 'st_id_search_tf', 'id');
    showXML(responseXML, 'st_name_autoComplete', 'person', 'st_name_search_tf', '');
}

function classroomSuggestion()
{
    var url = "GetAllCourses";
    var ajax = new AJAXInteraction(url, validateCallbackClassroomSuggestion);
    ajax.doGet();
}

function validateCallbackClassroomSuggestion(responseXML)
{
    showXML(responseXML, 'st_classroom_autoComplete', 'course', 'st_classroom_search_tf', '');
}

function showXML(xmlResponse , divDestino , tagName, idtf, att) {
	var arrayAutocomplete = new Array();
	var contador = xmlResponse.getElementsByTagName(tagName).length;
	//alert(contador);
	if(att=="")	
	{	
		for (var i = 0; i < contador-1; i++)
			{
				arrayAutocomplete.push(xmlResponse.getElementsByTagName(tagName)[i].firstChild.data);
				//lert(arrayAutocomplete);
			}
			
			new Autocompleter.Local(idtf,divDestino, arrayAutocomplete, {});
	}
	else
	{	
		for (var i = 0; i < contador-1; i++)
			{
				arrayAutocomplete.push(xmlResponse.getElementsByTagName(tagName)[i].getAttribute(att));
				
			}
			
			new Autocompleter.Local(idtf,divDestino, arrayAutocomplete, {});
		}	
}


function searchStudentById()
{
    var id = document.search_student_by_id.st_id_search_tf.value;
    var url = "SearchStudentSchedule?student_id=" + id;
    var ajax = new AJAXInteraction(url, validateCallbackSearchStudentById);
    ajax.doGet();
}

function validateCallbackSearchStudentById(responseXML)
{
    var Schedule="";
	
		Schedule ="<br><strong>" + responseXML.getElementsByTagName('student')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table width='800px'><tr><td width='300px'><strong>Nombre de la clase</strong></td><td><strong>Dias</strong></td><td><strong>Horario</strong></td><td><strong>Salon</strong></td><td width='200px'><strong>Profesor</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('classroom');
				Schedule += "</td>";
				Schedule += "<td width='200px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('professor-name');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('Schedule_results').innerHTML = Schedule;
}

function searchStudentByName()
{
    var url = "GetAllStudents";
    var ajax = new AJAXInteraction(url, validateCallbackSearchStudentByName);
    ajax.doGet();
}

function validateCallbackSearchStudentByName(responseXML)
{
    var contador = responseXML.getElementsByTagName('person').length;
    var name = document.search_student_by_name.st_name_search_tf.value;
    var index = -1;
    for(var i=0; i<=contador-1; i++)
    {
        if(name == responseXML.getElementsByTagName('person')[i].firstChild.data)
        {    
            index = i;
                break;
           }
        
    }
    
    var id = responseXML.getElementsByTagName('person')[index].getAttribute('id');
    
    var url = "SearchStudentSchedule?student_id=" + id;
    var ajax = new AJAXInteraction(url, validateCallbackValidateCallbackSearchStudentByName);
    ajax.doGet();
}

function validateCallbackValidateCallbackSearchStudentByName(responseXML)
{
    var Schedule="";
	
		Schedule ="<br><strong>" + responseXML.getElementsByTagName('student')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table width='800px'><tr><td width='300px'><strong>Nombre de la clase</strong></td><td><strong>Dias</strong></td><td><strong>Horario</strong></td><td><strong>Salon</strong></td><td width='200px'><strong>Profesor</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('classroom');
				Schedule += "</td>";
				Schedule += "<td width='200px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('professor-name');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('Schedule_results').innerHTML = Schedule;
}


function searchStudentsPerClassroom()
{
   
    var url = "GetAllCourses";
    var ajax = new AJAXInteraction(url, validateCallbackSearchStudentsPerClassroom);
    ajax.doGet();
}

function validateCallbackSearchStudentsPerClassroom(responseXML)
{
     var name = document.search_for_class.st_classroom_search_tf.value;
     
     var contador = responseXML.getElementsByTagName('course').length; 
     var index = -1;
     
     for(var i=0; i<=contador-1; i++)
     {
        if(name == responseXML.getElementsByTagName('course')[i].firstChild.data)
        {
            index = responseXML.getElementsByTagName('course')[i].getAttribute('id');
            break;
        }
     }
     
     var url = "SearchStudentPerCourse?course_id=" + index;
     var ajax = new AJAXInteraction(url, validateCallbackValidateCallBackSearchStudentsPerClassroom);
     ajax.doGet();
}

function validateCallbackValidateCallBackSearchStudentsPerClassroom(responseXML)
{
    var Schedule="";
	
		Schedule ="<br><strong>" + responseXML.getElementsByTagName('course')[0].firstChild.data+ "</strong> <br\>";
                Schedule ="<br><strong>" + responseXML.getElementsByTagName('course')[0].getAttribute('professor-name')+ "</strong> <br\>";
		Schedule += "<br><br><table width='800px'><tr><td width='300px'><strong>Nombre de los Estudiante</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('student').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('student')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('Schedule_results').innerHTML = Schedule;
}

function professorIdSuggestion()
{
    var url = "GetAllProfessors";
    var ajax = new AJAXInteraction(url, validateCallbackProfessorIdSuggestion);
    ajax.doGet();
}

function validateCallbackProfessorIdSuggestion(responseXML)
{
    showXML(responseXML, 'pr_id_autoComplete', 'person', 'pr_name_search_tf', 'id');
    showXML(responseXML, 'pr_name_autoComplete', 'person', 'pr_id_search_tf', '');
}

function searchProfessorById()
{
    var id = document.search_for_professor_id.pr_name_search_tf.value;
    
    var url = "SearchProfessorSchedule?professor_id=" + id;
    var ajax = new AJAXInteraction(url, validateCallbackSearchProfessorById);
    ajax.doGet();
}

function validateCallbackSearchProfessorById(responseXML)
{
    	var Schedule="";
	
		Schedule ="<br><p>Results</p><br><strong>" + responseXML.getElementsByTagName('professor')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table><tr><td width='250px'><strong>Course Name</strong></td><td><strong>Days</strong></td><td><strong>Time</strong></td><td><strong>Classroom</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('classroom');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('professor_results').innerHTML = Schedule;
}

function searchProfessorByName()
{
    var url = "GetAllProfessors";
    var ajax = new AJAXInteraction(url, validateCallbackSearchProfessorByName);
    ajax.doGet();
}

function validateCallbackSearchProfessorByName(responseXML)
{
    var name = document.search_for_professor_name.pr_id_search_tf.value;
    
    var index = -1;
    var contador = responseXML.getElementsByTagName('person').length;
    
    for(var i=0; i<=contador-1; i++)
    {
        if(name == responseXML.getElementsByTagName('person')[i].firstChild.data)
        {    
            index = i;
                break;
           }
        
    }
    
    var id = responseXML.getElementsByTagName('person')[index].getAttribute('id');
    
    var url = "SearchProfessorSchedule?professor_id=" + id;
    var ajax = new AJAXInteraction(url, validateCallbackValidateCallbackSearchProfessorByName);
    ajax.doGet();
}

function validateCallbackValidateCallbackSearchProfessorByName(responseXML)
{
        	var Schedule="";
	
		Schedule ="<br><p>Results</p><br><strong>" + responseXML.getElementsByTagName('professor')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table><tr><td width='250px'><strong>Course Name</strong></td><td><strong>Days</strong></td><td><strong>Time</strong></td><td><strong>Classroom</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('classroom');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('professor_results').innerHTML = Schedule;
}

function classroomSuggestion()
{
    url = "GetAllClassrooms";
    var ajax = new AJAXInteraction(url, validateCallbackClassroomSuggestion);
    ajax.doGet();
}

function validateCallbackClassroomSuggestion(responseXML)
{
    showXML(responseXML, 'cl_name_autoComplete', 'classroom', 'cl_id_search_tf', '');
}

function searchClassroom()
{
    url = "GetAllClassrooms";
        var ajax = new AJAXInteraction(url, validateCallbackSearchClassrooms);
    ajax.doGet();
}

function validateCallbackSearchClassrooms(responseXML)
{
    var name = document.search_classroom_form.cl_id_search_tf.value;
    var contador = responseXML.getElementsByTagName('classroom').length;
    var index = -1;
    
    for(var i=0; i<=contador-1; i++)
    {
        if(name == responseXML.getElementsByTagName('classroom')[i].firstChild.data)
        {
            index = responseXML.getElementsByTagName('classroom')[i].getAttribute('id');
            break;
        }
    }
    
    var url = "SearchClassroomSchedule?classroom_id=" + index;
    var ajax = new AJAXInteraction(url, validateCallbackValidateCallBackSearchClassrooms);
    ajax.doGet();
}

function validateCallbackValidateCallBackSearchClassrooms(responseXML)
{
    
	var Schedule="";
	
		Schedule ="<br><p>Results</p><br><strong>" + responseXML.getElementsByTagName('classroom')[0].firstChild.data+ "</strong>";
		
		Schedule += "<br><br><table><tr><td width='250px'><strong>Course Name</strong></td><td><strong>Days</strong></td><td><strong>Time</strong></td><td><strong>Professor</strong></td><tr>";
		
		var contador = responseXML.getElementsByTagName('course').length;
		
		for (var i=0;i<=contador-1;i++)
			{	
				Schedule += "<tr>";
				Schedule += "<td>";
				Schedule += responseXML.getElementsByTagName('course')[i].firstChild.data;
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('days');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('time');
				Schedule += "</td>";
				Schedule += "<td width='100px'>";
				Schedule += responseXML.getElementsByTagName('course')[i].getAttribute('professor-name');
				Schedule += "</td>";
				Schedule += "</tr>";
				
			};
		
		Schedule += "</table>";
			document.getElementById('classroom_results').innerHTML = Schedule;
}

</script>

<FORM NAME="joe">
<INPUT TYPE="hidden" NAME="burns">
</FORM>


<script type="text/javascript" src="js/tabber.js"></script>

<style type="text/css">
.tabberlive .tabbertab {
  height:auto;
}
</style>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="logo_little"><img src="images/ischedule_logo_little.png" width="200" height="55"></div>
<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Student:<div id="st_div"> </div></h1>


<div class="tabber">

     <div class="tabbertab">
	  <h2>View Schedule </h2>
     </div>


     <div class="tabbertab">
	  <h2>Find Student </h2>
     </div>


     <div class="tabbertab">
	  <h2>Find Teacher </h2>
     </div>
	 
	   <div class="tabbertab">
	  <h2>View Classroom  </h2>
     </div>

</div>

</body>
</html>
